<template>
    <div class="list_container">
        <div class="header">
            <div class="header_title">{{ title }}</div>
            <el-input v-model="inputValue" @change="handleEnterKey" :placeholder="`请输入关键词按回车搜索` + title"
                style="padding: 0 10px;"></el-input>
        </div>
        <div class="list_content" ref="list" @scroll="handleScroll">
            <div class="list_detail" v-for="(item, idx) in playList" :key="idx">
                <div style="height: 100px;width: 200px;">
                    <img :src="item.imgurl" style="border-radius: 10px;width: 100%;  height: 100%;object-fit: cover;" />
                </div>
                <div
                    style="display: flex;flex-direction: column;justify-content: center; margin-left: 20px; max-width: 50%;">
                    <div>
                        <span>{{ item.albumname }}</span>
                        <div v-show="!(item.albumname == item.videoname)">第{{ numberHandler(item.albumname, item.videoname)
                        }}集
                        </div>
                    </div>
                    <span v-show="item.duration && item.playtime">观看至{{ playPercentage(item.duration, item.playtime)
                    }}%</span>
                </div>
                <span style="position: absolute; right: 10px;bottom:0px;color: #a8a8a8;font-size: 12px;">{{ item.adddate
                }}</span>
            </div>
            <div v-show="showLoading">
                <el-divider>{{ loadingText }}</el-divider>
            </div>
        </div>
    </div>
</template>

<script>
import { getPlayApi, getPlaySKApi } from "@/api/addApp/aiqiyi_api"
import { throttle } from 'lodash';
export default {
    name: "listMessage",
    props: ['sendData'],
    data() {
        return {
            isShowNumber: false,//控制是否有集数展示
            title: '',
            inputValue: '',
            playList: [],
            offset: 1,
            limit: 20,
            list: [],
            loadingText: '正在加载中...',
            showLoading: false,//控制加载文本的显示
        };
    },
    created() {

    },
    mounted() {
        if (this.sendData.class == '爱奇艺') {
            this.title = '爱奇艺';
            this.getPlayList();
        } else if (this.sendData.class == '爱奇艺随刻') {
            this.title = '爱奇艺随刻';
            this.getPlaySKList();
        }
    },
    watch: {
        sendData(newVal,oldVal) {
            this.title = newVal.class;
            if(newVal.class != oldVal.class){
                if (newVal.class == '爱奇艺') {
                    this.playList=[];
                    const list = this.$refs.list;
                    list.scrollTop=0;
                    this.showLoading = false;
                    this.loadingText='正在加载中...';
                    this.getPlayList();
                } else if (newVal.class == '爱奇艺随刻') {
                    this.playList=[];
                    const list = this.$refs.list;
                    list.scrollTop=0;
                    this.showLoading = false;
                    this.loadingText='正在加载中...';
                    this.getPlaySKList();

                }
            }
        }
    },
    computed: {

    },
    methods: {
        //判断是否滚到底部 触发条件
        handleScroll: throttle(function () {
            const list = this.$refs.list;
            // 判断滚动到底部
            if (list.scrollTop + list.clientHeight + 10 + 10 >= list.scrollHeight) {

                this.showLoading = true;
                if (this.list.length == this.limit) {
                    this.loadingText = '正在加载. . .';
                    this.offset++
                    if (this.sendData.class == '爱奇艺') {
                        this.getPlayList();
                    } else if (this.sendData.class == '爱奇艺随刻') {
                        this.getPlaySKList();
                    }
                } else {
                    this.loadingText = '到底了 没有更多了！';
                }
            }
        }),
        //获取爱奇艺播放记录
        async getPlayList() {
            let data = {
                proof_num: this.sendData.proof_num,
                offset: this.offset,
                limit: this.limit,
                key: this.inputValue
            }
            try {
                let list = await getPlayApi(data)
                this.list = list.data
                this.playList.push(...list.data)
            } catch (error) {
                console.error(error)
            }

        },
        //获取爱奇艺随刻播放记录
        async getPlaySKList() {
            let data = {
                proof_num: this.sendData.proof_num,
                offset: this.offset,
                limit: this.limit,
                key: this.inputValue
            }
            try {
                let list = await getPlaySKApi(data)
                this.list = list.data
                this.playList.push(...list.data)
            } catch (error) {
                console.error(error)
            }
        },
        //计算播放百分比
        playPercentage(duration, playTime) {
            return Math.round((playTime / duration) * 100)
        },
        //集数截取
        numberHandler(albumName, videoName) {
            if (albumName == videoName) {
                return
            } else {
                return videoName.split('第')[1].split('集')[0]
            }
        },
        //搜索
        handleEnterKey() {
            this.getPlayList();
        }
    },
};
</script>

<style lang='scss' scoped>
.list_container {
    .header {
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 10px;

        .header_title {
            width: 100%;
            text-align: center;
            font-size: 16px;
            font-weight: 900;
            margin: 10px 0;
        }
    }

    .list_content {
        height: 726px;
        overflow-y: auto;

        .list_detail {
            display: flex;
            flex-direction: row;
            padding: 5px;
            border-bottom: 1px solid #e0e0e0;
            // border-radius: 10px;
            margin-top: 5px;
            position: relative;
        }
    }

    @media screen and (min-width: 2360px) {
        .list_content {
            height: 670px;
        }
    }

    /* 当屏幕宽度大于2560时 */
    @media screen and (min-width: 2561px) {
        .list_content {
            height: 527px;
        }
    }
}
</style>